﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽卡模拟器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }

        .container {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 5px;
        }

        .input-group {
            margin-bottom: 20px;
        }

        input {
            width: 70%;
            padding: 8px;
            margin-right: 10px;
        }

        button {
            padding: 8px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 10px 10px 10px 0px;
        }

            button:hover {
                background-color: #0056b3;
            }

        #result {
            white-space: pre-wrap;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            min-height: 100px;
        }

        .loading {
            display: none;
            color: #666;
            margin: 10px 0;
        }

        .goldText {
            color: #fadb14;
        }

        .violetText {
            color: #5f3dc4;
        }

        .blueText {
            color: #4dabf7;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>抽卡模拟器</h2>

        <div class="input-group">
            <input type="text" id="apiUrl" placeholder="输入IP地址" value="http://localhost:5255">
            <br>
            <br>
            <input type="text" id="user" placeholder="输入用户ID">
            <br>
            <button onclick="callApi()">查询</button>
            <button onclick="singlePull()">单抽</button>
            <button onclick="tenPulls()">十连</button>
        </div>

        <div class="loading" id="loading">加载中...</div>

        <div>
            <h3>返回结果：</h3>
            <button onclick="next()">跳过</button>
            <button onclick="jumpAll()">全部跳过</button>
            <div id="queryRes"></div>
            <div id="result"></div>
        </div>
    </div>

    <script>
        document.getElementById('apiUrl').value = window.location.protocol + "//" + window.location.host;

        var cardArray = new Array(10);
        var index = 0;
        var cardLength = 0;

        async function callApi() {
            const userId = document.getElementById('user');
            const apiUrl = document.getElementById('apiUrl');
            const resultDiv = document.getElementById('queryRes');

            // 清空之前的结果
            resultDiv.innerHTML = '';

            try {
                if (userId.value == "") {
                    resultDiv.innerHTML = "Error: 请输入用户ID";
                    return;
                }

                // 解析JSON数据
                var url = `${apiUrl.value}/api/drawcards/${userId.value}`;

                requestBody = {
                    cardPoolType: 0,
                }

                const data = await sendRequest(url, 'GET', requestBody);

                resultDiv.innerHTML += `累计抽卡次数: ${data.totalPulls}<br>`;
                resultDiv.innerHTML += `保底剩余抽取次数: ${data.hardPityRemaining}<br>`;
                resultDiv.innerHTML += `保底状态: ${data.isPityActive}<br>`;
                resultDiv.innerHTML += `歪卡池次数: ${data.crookedPity}<br>`;
                resultDiv.innerHTML += `UP五星累计抽取数量: ${data.fiveStarUpCount}<br>`;
                resultDiv.innerHTML += `常驻五星累计抽取数量: ${data.recidentCount}<br>`;
                resultDiv.innerHTML += `五星累计抽取总数: ${data.fiveStarCount}<br>`;
            } catch (error) {
                // 错误处理
                resultDiv.innerHTML = `请求失败: ${error.message}`;
                console.error('Error:', error);
            } finally {

            }
        }

        async function singlePull() {
            await processPulls(1);
        }

        async function tenPulls() {
            await processPulls(10);
        }

        async function processPulls(count) {
            const userId = document.getElementById('user');
            const apiUrl = `${document.getElementById('apiUrl').value}/drawcards`;
            const resultDiv = document.getElementById('result');
            const loadingDiv = document.getElementById('loading');
            const queryResDiv = document.getElementById('queryRes');

            requestBody = {
                "uid": userId.value,
                "drawCount": count,
                "currency": 0,
                "cardPoolType": 0
            }

            // 清空之前的结果
            resultDiv.innerHTML = '';
            queryResDiv.innerHTML = '';
            index = 0;

            try {
                // 解析JSON数据
                const data = await sendRequest(apiUrl, 'POST', requestBody);

                cardArray = data.cards;
                cardLength = data.cards.length;

                if (data.gachaResult > 0) {
                    resultDiv.innerHTML += "<span class='goldText'>金色传说</span><br><br>"
                }
                else {
                    next();
                }

            } catch (error) {
                // 错误处理
                resultDiv.innerHTML = `请求失败: ${error.message}`;
                console.error('Error:', error);
            } finally {
                // 隐藏加载状态
                loadingDiv.style.display = 'none';
            }
        }

        function next() {
            const resultDiv = document.getElementById('result');

            if (index == cardLength) {
                jumpAll();
                index = 0;
                return;
            }

            resultDiv.innerHTML = `${index + 1}/${cardLength}\n`;

            if (cardArray[index].cardType == 0) {
                resultDiv.innerHTML += "<span class='blueText'>☆☆☆</span>\n";
            }
            if (cardArray[index].cardType == 1) {
                resultDiv.innerHTML += "<span class='violetText'>☆☆☆☆</span>\n";
            }
            if (cardArray[index].cardType == 2) {
                resultDiv.innerHTML += "<span class='goldText'>☆☆☆☆☆</span>";
                if (cardArray[index].isUp) {
                    resultDiv.innerHTML += "UP";
                }
                resultDiv.innerHTML += "\n";
            }
            index++;
        }

        function jumpAll() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '';

            for (let i = 0; i < cardArray.length; i++) {
                if (cardArray[i].cardType == 0) {
                    resultDiv.innerHTML += "<span class='blueText'>☆☆☆</span>\n";
                }
                if (cardArray[i].cardType == 1) {
                    resultDiv.innerHTML += "<span class='violetText'>☆☆☆☆</span>\n";
                }
                if (cardArray[i].cardType == 2) {
                    resultDiv.innerHTML += "<span class='goldText'>☆☆☆☆☆</span>";
                    if (cardArray[i].isUp) {
                        resultDiv.innerHTML += "UP";
                    }
                    resultDiv.innerHTML += "\n";
                }
            }
        }

        async function sendRequest(url, method, request) {

            console.log(url);
            console.log(method);
            console.log(request);

            const resultDiv = document.getElementById('result');
            const loadingDiv = document.getElementById('loading');
            try {
                // 显示加载状态
                loadingDiv.style.display = 'block';

                var response;
                if (method == 'GET') {
                    response = await sendGet(url, request);
                }
                else if (method == 'POST') {
                    response = await sendPost(url, request);
                }
                else {
                    throw new Error(`不支持的请求方法! Method: ${method}`);
                }

                // 检查响应状态
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态码: ${response.status}`);
                }

                return await response.json();

            } catch (error) {
                // 错误处理
                resultDiv.innerHTML = `请求失败: ${error.message}`;
                console.error('Error:', error);
            } finally {
                // 隐藏加载状态
                loadingDiv.style.display = 'none';
            }
        }

        async function sendGet(url, request) {
            try {
                console.log(url);
                // 发送GET请求
                if (request == null) {
                    return await fetch(url);
                }

                const queryString = new URLSearchParams(request).toString();
                const fullUrl = `${url}?${queryString}`;

                console.log(fullUrl);
                return await fetch(fullUrl);
            } catch (error) {
                // 错误处理
                console.error('GET Error:', error);
            }
        }

        async function sendPost(url, request) {
            try {
                // 发送GET请求
                return await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(request)
                });

            } catch (error) {
                // 错误处理
                console.error('POST Error:', error);
            }
        }
    </script>
</body>

</html>